<template>
  <div class="celiang">
    <el-tabs :tab-position="'left'" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabsData"
        :label="item.label"
        :key="item.label"
      >
        <div class="tableContainer">
          <div class="top">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item
                :label="item.label"
                v-for="(item, index) in searchLabel"
                :key="index"
              >
                <el-input
                  size="small"
                  v-model="item.bindData"
                  placeholder="请输入"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="onSubmit"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  @click="onReset"
                  style="background-color: #061f41; color: #dee1e6"
                  >重置</el-button
                >
                <el-button
                  v-if="tabLabel == '测量文档'"
                  size="small"
                  type="warning"
                  @click="feileiFn"
                  >分类管理</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button size="small" @click="tableSetFn" type="primary"
                  >表格设置</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button size="small" @click="addFn" type="primary"
                  >新增数据</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="tabLabel != '测量文档' && tabLabel != '采煤机'"
              >
                <el-button
                  size="small"
                  @click="exportFn('quanbu')"
                  type="success"
                  >导出全部</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="tabLabel != '测量文档' && tabLabel != '采煤机'"
              >
                <el-button
                  size="small"
                  @click="exportFn('danqian')"
                  type="success"
                  >导出当前页</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="tabLabel != '测量文档'">
                <el-button size="small" @click="importFn" type="success"
                  >导入</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="tabLabel != '测量文档'">
                <el-button size="small" @click="downloadFn" type="success"
                  >下载模版</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button size="small" @click="delAllFn" type="danger"
                  >批量删除</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="bottom">
            <el-table
              :data="tableData"
              :cell-style="selectedCellStyle"
              style="width: 100%"
               @selection-change="handleSelectionChange"
              :height="tableData.length > 10 ? 560 : tableHeight"
            >
            <!-- height="560" -->
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column
                :prop="item.field"
                :label="item.title"
                :width="item.width"
                v-for="(item, index) in tableHeaderShow"
                :key="index"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作"
                :width="tabLabel == '测量文档' ? 180 : 150"
              >
                <template slot-scope="{ row }">
                  <el-button
                    v-if="tabLabel == '测量文档'"
                    type="text"
                    size="mini"
                    @click="handledownload(row)"
                    >下载</el-button
                  >
                  <el-button type="text" size="mini" @click="handleDetail(row)"
                    >查看</el-button
                  >
                  <el-button type="text" size="mini" @click="handleEdit(row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    @click="handleDelete(row)"
                    style="color: red"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <pagination
            :total="page.total"
            :page="page.currentPage"
            :limit="page.pageSize"
            @pagination="paginationFn"
          ></pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增/编辑 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">{{ title }}</span>
      <!-- 控制点 -->
      <el-form
        v-if="tabLabel === '控制点'"
        :model="form"
        ref="form"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="巷道名称" prop="tunnelName">
              <el-input
                size="small"
                v-model="form.tunnelName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点号" prop="code">
              <el-input
                size="small"
                v-model="form.code"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="X坐标" prop="x">
              <el-input
                size="small"
                v-model="form.x"
                placeholder="请输入"
                :disabled="title === '编辑'"
              ></el-input>
              <!-- <el-select
                size="small"
                v-model="form.pointCodes"
                placeholder="请选择"
                multiple
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in dianSelectData"
                  :key="index"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Y坐标" prop="y">
              <el-input
                size="small"
                v-model="form.y"
                placeholder="请输入"
                  :disabled="title === '编辑'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="Z坐标" prop="z">
              <el-input
                size="small"
                v-model="form.z"
                placeholder="请输入"
                  :disabled="title === '编辑'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="坐标系" prop="coordinateSystem">
              <el-input
                size="small"
                v-model="form.coordinateSystem"
                placeholder="请输入"
                  :disabled="title === '编辑'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 测量文档 -->
      <el-form
        v-if="tabLabel === '测量文档'"
        :model="dizhibaogaoForm"
        ref="dizhibaogaoForm"
        :rules="dizhibaogaoRules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="文档名称" prop="fileName">
              <el-input
                size="small"
                v-model="dizhibaogaoForm.fileName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制单位" prop="compilationUnit">
              <el-input
                size="small"
                v-model="dizhibaogaoForm.compilationUnit"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="编制日期" prop="compilationDate">
              <el-date-picker
                style="width: 100%"
                size="small"
                v-model="dizhibaogaoForm.compilationDate"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间" prop="sendTime">
              <el-date-picker
                style="width: 100%"
                size="small"
                v-model="dizhibaogaoForm.sendTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件标签" prop="fileTagId">
              <el-select
                @change="tagChangeSelect"
                style="width: 100%"
                size="small"
                v-model="dizhibaogaoForm.fileTagId"
              >
                <el-option
                  :label="tagitem.tag"
                  :value="tagitem.id"
                  v-for="(tagitem, tagindex) in fenleiAllData"
                  :key="tagindex"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="文件上传" prop="">
              <el-upload
                ref="upload"
                class="upload-demo"
                :action="uploadFileUrl"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :headers="headers"
                :limit="1"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip" style="color: #838fa0">
                  允许上传 "bmp", "gif", "jpg", "jpeg", "png", "doc", "docx",
                  "xls", "xlsx", "ppt", "pptx", "html", "htm", "txt", "rar",
                  "zip", "gz", "bz2", "mp4", "avi", "rmvb", "pdf",
                  "dwg""wps","bpmn","bar"文件，且不超过50m
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述" prop="remark">
              <el-input
                type="textarea"
                size="small"
                v-model="dizhibaogaoForm.remark"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAdd">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog
      :visible.sync="detaildialogVisible"
      width="50%"
      :before-close="detailhandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">详情</span>
      <!-- 控制点 -->
      <el-form v-if="tabLabel === '控制点'" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="巷道名称：" prop="tunnelName">
              {{ detailObject.tunnelName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点号：" prop="code">
              {{ detailObject.code }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="X坐标：" prop="x">
              {{ detailObject.x }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Y坐标：" prop="y">
              {{ detailObject.y }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="Z坐标：" prop="z">
              {{ detailObject.z }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="坐标系" prop="coordinateSystem">
              {{ detailObject.coordinateSystem }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 测量文档 -->
      <el-form
        v-if="tabLabel === '测量文档'"
        :model="dizhibaogaoForm"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="文档名称：" prop="fileName">
              {{ detailObject.fileName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制单位：" prop="compilationUnit">
              {{ detailObject.compilationUnit }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="编制日期：" prop="compilationDate">
              {{ detailObject.compilationDate }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间：" prop="sendTime">
              {{ detailObject.sendTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件url：" prop="fileUrl"
              >{{ detailObject.fileUrl }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件后缀：" prop="fileSuffix"
              >{{ detailObject.fileSuffix }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="描述：" prop="remark">
              {{ detailObject.remark }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件标签：" prop="fileTagId">
              {{ detailObject.fileTag }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :label-width="'120px'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人：" prop="">
              {{ detailObject.createBy }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：" prop="">
              {{ detailObject.createTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="更新人：" prop="">
              {{ detailObject.updateBy }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间：" prop="">
              {{ detailObject.updateTime }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 分类管理 -->
    <el-dialog
      :visible.sync="fenleiFlag"
      width="50%"
      :before-close="fenleihandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">分类管理</span>
      <div style="margin-bottom: 15px">
        <el-button size="small" @click="addFenleiFn" type="primary"
          >新建分类</el-button
        >
      </div>
      <div
        class="bottom"
        style="
          height: 600px;
          overflow-y: auto;
          background-color: #061f41 !important;
        "
      >
        <el-table
          :data="fenleiData"
          :cell-style="selectedCellStyle"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column prop="id" label="编号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="tag" label="分类" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="editFenleiFn(row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="deleteFenleiFn(row)"
                style="color: red"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :total="page2.total"
        :page="page2.currentPage"
        :limit="page2.pageSize"
        @pagination="paginationFn2"
      ></pagination>
    </el-dialog>
    <!-- 新建分类管理名称 -->
    <el-dialog
      :visible.sync="fenlei2Flag"
      width="20%"
      :before-close="fenlei2handleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">{{ fenleiTitle }}</span>
      <el-form
        ref="feileiRef"
        :model="fenleiForm"
        :rules="fenleiRules"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="tag">
          <el-input
          size="small"
            v-model="fenleiForm.tag"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fenleiAdd">确 定</el-button>
        <el-button @click="fenlei2handleClose">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 表格设置 -->
    <el-dialog
      :visible.sync="tableSettingFlag"
      width="50%"
      :before-close="tableSettinghandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">表格设置</span>
      <div style="height: 670px; overflow: auto; margin-bottom: 15px">
        <el-table
          height="650"
          :data="headerTitle"
          :cell-style="selectedCellStyle"
          class="draggable-table"
           row-key="field"
        >
          <el-table-column label="拖动排序" align="center">
            <template slot-scope="{ row }">
              <img
                class="rowSortable"
                src="@/assets/images/排序.png"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            label="列名"
            prop="title"
            align="center"
          ></el-table-column>
          <el-table-column label="是否显示" prop="show" align="center">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.show"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="列宽" prop="width">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.width"
                size="small"
                placeholder="请输入列宽"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tableSetSubmit">确 定</el-button>
        <el-button @click="tableSettinghandleClose">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog
      :visible.sync="daoruFlag"
      width="50%"
      :before-close="daoruhandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">导入</span>
      <div class="w100 h100" style="padding: 10px">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="baseurl + importUrl"
          :limit="1"
          :auto-upload="false"
          :headers="headers"
          :file-list="fileList2"
          :on-success="onsuccess"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <el-button
            style="margin-left: 10px"
            class="ml-3"
            type="success"
            @click="submitUpload"
          >
            上传
          </el-button>

          <template #tip>
            <div style="color: #fff; font-size: 14px; margin-top: 10px">
              提示：先导出模板，再在模板文件中修改导入数据，否则导入失败
            </div>
          </template>
        </el-upload>
      </div>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="tableSettinghandleClose">取 消</el-button>
        <el-button type="primary" @click="tableSetSubmit">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/huazi/pagination.vue";
import axios from "@/utils/request";
import Sortable from "sortablejs";
import { getToken } from "@/utils/auth";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      tableHeight:null,
      daoruFlag: false, //导入弹窗
      baseurl: process.env.VUE_APP_BASE_API,
      fileList2: [],
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: { Authorization: "Bearer " + getToken() },
      fileList: [
        // { name: 'food.jpeg', url: 'http://example.com/food.jpeg' },
      ],
      //分类管理
      fenleiFlag: false,
      fenlei2Flag: false, //新增分类
      fenleiTitle: "新增",
      fenleiData: [], //分类数据
      fenleiAllData: [], //全部分类数据
      fenleiForm: {}, //分类新增数据
      fenleiRules: {
        tag: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
      tableSettingFlag: false, //表格设置
      tabLabel: "控制点",
      tabsData: [
        {
          label: "控制点",
        },
        {
          label: "测量文档",
        },
        // {
        //   label: "水准数据",
        // },
        // {
        //   label: "沉降观测数据",
        // },
        // {
        //   label: "测量通知单",
        // },
        // {
        //   label: "测量文档",
        // },
      ],
      title: "新增",
      dialogVisible: false, //新增/编辑弹层
      detaildialogVisible: false, //详情弹层
      detailObject: {}, //详情弹层数据
      searchLabel: [{ label: "巷道名称", bindData: "" }], //搜索字段
      form: {}, //控制点
      rules: {
        tunnelName: [
          { required: true, message: "请输入巷道名称", trigger: "blur" },
        ],
        // code: [{ required: true, message: "请输入点号", trigger: "blur" }],
        x: [{ required: true, message: "请输入X坐标", trigger: "blur" },
        { validator: this.validateNum, trigger: 'blur' }
        ],
        y: [{ required: true, message: "请输入Y坐标", trigger: "blur" },
        { validator: this.validateNum, trigger: 'blur' }
        ],
        z: [{ required: true, message: "请输入Z坐标", trigger: "blur" },
        { validator: this.validateNum, trigger: 'blur' }
        ],
        coordinateSystem: [
          { required: true, message: "请输入坐标系", trigger: "blur" },
        ],
      },
      dizhibaogaoForm: {}, //测量文档
      dizhibaogaoRules: {
        fileName: [
          { required: true, message: "请输入文档名称", trigger: "blur" },
        ],
        compilationUnit: [
          { required: true, message: "请输入编制单位", trigger: "blur" },
        ],
        compilationDate: [
          { required: true, message: "请选择编制日期", trigger: "change" },
        ],
        sendTime: [
          { required: true, message: "请选择上传时间", trigger: "change" },
        ],
      },
      tableData: [], //表格数据
      headerData: [], //表头数据
      headerTitle: [], //表头名称
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      page2: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      multipleSelection: [], //多选
      headerZiduan: "t_measure_control_point", //表头字段,默认第一个控制点
      listUrl: "/transgeology/measure/controlpoint/list", //列表接口,默认第一个控制点
      addUrl: "/transgeology/measure/controlpoint/add", //新增接口,默认第一个控制点
      editUrl: "/transgeology/measure/controlpoint/edit", //编辑接口,默认第一个控制点
      deleteUrl: "/transgeology/measure/controlpoint/", //删除接口,默认第一个控制点
      detailUrl: "/transgeology/measure/controlpoint/", //详情接口,默认第一个控制点
      downloadUrl: "/transgeology/measure/controlpoint/importTemplate", //下载模版接口,默认第一个控制点
      importUrl: "/transgeology/measure/controlpoint/importExcel", //导入接口,默认第一个控制点
      exportUrl: "/transgeology/measure/controlpoint/export", //导出接口,默认第一个控制点
    };
  },
  methods: {
    validateNum(rule, value, callback) {
      if(value==null){
        callback();
      }
		//正则校验只能输入数字或小数
    var re = /^[0-9]+(\.[0-9]+)?$/;
		if (!re.test(value)) {
			callback(new Error("只能输入数字或小数"));
		} else {
			callback();
		}
    },
    handleSelectionChange(val) {
      //多选
      this.multipleSelection = val;
    },
    //下载模版
    downloadFn() {
      axios({
        url: this.downloadUrl,
        method: "POST",
        responseType: "blob",
      }).then((response) => {
        var fileURL = window.URL.createObjectURL(new Blob([response]));
        var fileLink = document.createElement("a");
        fileLink.href = fileURL;
        fileLink.setAttribute("download", `${this.tabLabel}(模版).xlsx`);
        document.body.appendChild(fileLink);
        fileLink.click();
      });
    },
    //导入
    importFn() {
      // axios.post(this.importUrl, {}).then((res) => {});
      this.daoruFlag = true;
    },
    daoruhandleClose() {
      this.daoruFlag = false;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传成功时执行的函数
    onsuccess(res) {
      if (res.code === 200) {
        if (res.data !== null && res.data.includes("重复数据")) {
          this.$message.warning(res.data);
        } else {
          this.daoruFlag = false;
          this.getList();
          this.fileList2 = [];
          this.$message.success("导入成功");
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    //导出
    exportFn(val) {
      let obj = {
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      if (val == "danqian") {
        obj = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
        };
      } else if (val == "quanbu") {
        obj = {
          // pageNum: 1,
          // pageSize: 10000,
        };
      }
      axios({
        url: this.exportUrl,
        method: "POST",
        responseType: "blob",
        data: obj,
        // params:{trainInfoSecondType: props.catalogId}
      }).then((response) => {
        var fileURL = window.URL.createObjectURL(new Blob([response]));
        var fileLink = document.createElement("a");
        fileLink.href = fileURL;
        fileLink.setAttribute(
          "download",
          val == "danqian"
            ? this.tabLabel + ".xlsx"
            : this.tabLabel + "(全部数据).xlsx"
        );
        document.body.appendChild(fileLink);
        fileLink.click();
      });
      // axios.post(this.listUrl, obj).then((res) => {
      //   if (res.data && res.data.list) {
      //     this.exportData = res.data.list;
      //     setTimeout(() => {
      //       /* 获取表格数据 */
      //       let xlsxParam = { raw: true }; //此行代码可解决导出时时间，身份证错乱问题
      //       const ws = XLSX.utils.table_to_sheet(
      //         document.getElementById("out-table"),
      //         xlsxParam
      //       );
      //       /* 新建工作簿并添加工作表 */
      //       const wb = XLSX.utils.book_new();
      //       XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      //       /* 生成Excel文件 */
      //       const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
      //       /* 字符串转ArrayBuffer */
      //       function s2ab(s) {
      //         const buf = new ArrayBuffer(s.length);
      //         const view = new Uint8Array(buf);
      //         for (let i = 0; i !== s.length; ++i)
      //           view[i] = s.charCodeAt(i) & 0xff;
      //         return buf;
      //       }
      //       /* 保存文件 */
      //       saveAs(
      //         new Blob([s2ab(wbout)], { type: "application/octet-stream" }),
      //         val == "danqian"
      //           ? this.tabLabel + ".xlsx"
      //           : this.tabLabel + "(全部数据).xlsx"
      //       );
      //     }, 1000);
      //   }
      // });
    },
    //分类管理
    tagChangeSelect() {
      //报告，文件标签下拉选择变化
      this.fenleiAllData.forEach((item) => {
        if (item.id == this.dizhibaogaoForm.fileTagId) {
          this.dizhibaogaoForm.fileTag = item.tag;
        }
      });
    },
    feileiFn() {
      //新建分类
      this.getFenleiList();
      this.fenleiFlag = true;
    },
    fenleihandleClose() {
      //新建分类关闭
      this.fenleiFlag = false;
    },
    fenlei2handleClose() {
      //新增关闭
      this.fenlei2Flag = false;
    },
    fenleiAdd() {
      //分类表单提交
      this.$refs.feileiRef.validate((valid) => {
        if (valid) {
          if (this.fenleiTitle == "新增") {
            axios
              .post("/geology/digital/filetag/add", {
                tag: this.fenleiForm.tag,
                fileType: 2, //文件类型,0=地质报告,1=水文报告,2=测量文档
              })
              .then((res) => {
                this.$message.success("新增成功");
                this.getFenleiList();
                this.fenlei2Flag = false;
                this.fenleiForm = {};
              });
          } else if (this.fenleiTitle == "编辑") {
            axios
              .post("/geology/digital/filetag/edit", {
                tag: this.fenleiForm.tag,
                id: this.fenleiForm.id,
                fileType: 2, //文件类型,0=地质报告,1=水文报告,2=测量文档
              })
              .then((res) => {
                this.$message.success("编辑成功");
                this.getFenleiList();
                this.fenlei2Flag = false;
                this.fenleiForm = {};
              });
          }
        } else {
          return false;
        }
      });
    },
    //新增分类
    addFenleiFn() {
      this.fenleiForm = {};
      this.fenleiTitle = "新增";
      this.fenlei2Flag = true;
    },
    //编辑分类
    editFenleiFn(row) {
      this.fenleiForm = row;
      this.fenleiTitle = "编辑";
      this.fenlei2Flag = true;
    },
    //删除分类
    deleteFenleiFn(row) {
      this.$confirm("是否删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.delete("/geology/digital/filetag/" + row.id).then((res) => {
            this.$message.success("删除成功");
            this.getFenleiList();
          });
        })
        .catch(() => {});
    },
    //获取分类管理数据
    getFenleiList() {
      axios
        .post("/geology/digital/filetag/list", {
          pageNum: this.page2.currentPage,
          pageSize: this.page2.pageSize,
          fileType: 2, //文件类型,0=地质报告,1=水文报告,2=测量文档
        })
        .then((res) => {
          if (res.data.list) {
            this.page2.total = res.data.total;
            this.fenleiData = res.data.list;
          }
        });
    },
    //表格设置
    tableSetFn() {
      //打开
      this.tableSettingFlag = true;
      this.$nextTick(() => {
        this.rowDrop();
      });
    },
    tableSettinghandleClose() {
      //关闭
      this.tableSetSubmit();
      this.tableSettingFlag = false;
    },
    tableSetSubmit() {
      //表格设置提交
      this.headerTitle.forEach((item, index) => {
          item.sort = index;
      });
      axios
        .post("/vxeheaders/setHeaders", {
          headers: this.headerTitle,
        })
        .then((res) => {
          this.getHeaderList()
          // this.getList();
          this.$message.success("设置成功");
          this.tableSettingFlag = false;
        });
    },
    rowDrop() {
      //行拖拽
      const tbody = document.querySelector(
        ".draggable-table .el-table__body-wrapper tbody"
      );
      new Sortable(tbody, {
        handle: ".rowSortable",
        animation: 150,
        onEnd: ({ newIndex, oldIndex }) => {
          console.log(newIndex, oldIndex);
          this.$nextTick(() => {
            const targetRow = this.headerTitle[oldIndex];
            this.headerTitle.splice(oldIndex, 1);
            this.headerTitle.splice(newIndex, 0, targetRow);
          });
          // const currRow = this.headerTitle.splice(oldIndex, 1)[0]
          // this.headerTitle.splice(newIndex, 0, currRow)
        },
      });
    },
    //测量文档文件上传
    beforeUpload(file) {
      const fileType = [
        "bmp",
        "gif",
        "jpg",
        "jpeg",
        "png",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "pptx",
        "html",
        "htm",
        "txt",
        "rar",
        "zip",
        "gz",
        "bz2",
        "mp4",
        "avi",
        "rmvb",
        "pdf",
        "dwg",
        "wps",
        "bpmn",
        "bar"
      ];
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
        // const isLt5M = file.size / 1024 < 500; //500kb
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小超过50m");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件类型不正确");
          return false;
        }
      }
    },
    handleRemove(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
      this.dizhibaogaoForm.fileSuffix = "";
      this.dizhibaogaoForm.fileUrl = "";
    },
    handleSuccess(data) {
      const FileExt = data.newFileName.replace(/.+\./, "").toLowerCase();
      this.dizhibaogaoForm.fileSuffix = "." + FileExt;
      this.dizhibaogaoForm.fileUrl = data.url;
    },
    handleClick(tab) {
      this.tabLabel = tab.label;
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      if (this.tabLabel == "控制点") {
        this.searchLabel = [{ label: "巷道名称", bindData: "" }]; //搜索字段
        this.headerZiduan = "t_measure_control_point"; //表头字段,默认第一个控制点
        this.listUrl = "/transgeology/measure/controlpoint/list"; //列表接口,默认第一个控制点
        this.addUrl = "/transgeology/measure/controlpoint/add"; //新增接口,默认第一个控制点
        this.editUrl = "/transgeology/measure/controlpoint/edit"; //编辑接口,默认第一个控制点
        this.deleteUrl = "/transgeology/measure/controlpoint/"; //删除接口,默认第一个控制点
        this.detailUrl = "/transgeology/measure/controlpoint/"; //详情接口,默认第一个控制点
        this.downloadUrl = "/transgeology/measure/controlpoint/importTemplate"; //下载模版接口,默认第一个控制点
        this.importUrl = "/transgeology/measure/controlpoint/importExcel"; //导入接口,默认第一个控制点
        this.exportUrl = "/transgeology/measure/controlpoint/export"; //导出接口,默认第一个控制点
      } else if (this.tabLabel == "测量文档") {
        //单独接口最后处理
        this.searchLabel = [
          { label: "文档名称", bindData: "" },
          { label: "编制单位", bindData: "" },
        ]; //搜索字段
        this.headerZiduan = "geology_report";
        this.listUrl = "/geology/digital/fileManage/listFile";
        this.editUrl = "/geology/digital/fileManage/editFile";
        this.addUrl = "/geology/digital/fileManage/addFile";
        this.detailUrl = `/geology/digital/fileManage/getInfo/`;
        this.deleteUrl = `/geology/digital/fileManage/del/`;
        // this.importUrl = "/geology/digital/fileManage/importExcel";//导入接口
        // this.exportUrl = "/geology/digital/fileManage/export";//导出接口
        // this.downloadUrl = "/geology/digital/fileManage/importTemplate";//下载模版接口
      }
      this.getHeaderList();
    },
    addFn() {
      //新增
      this.title = "新增";
      if (this.tabLabel == "控制点") {
        this.form = {};
      } else if (this.tabLabel == "测量文档") {
        axios
          .post("/geology/digital/filetag/listNoPage", {
            fileType: 2, //文件类型,0=地质报告,1=水文报告,2=测量文档
          })
          .then((res) => {
            this.fenleiAllData = res.data;
          });
        this.dizhibaogaoForm = {};
        this.fileList = [];
      }
      this.dialogVisible = true;
    },
    handleClose() {
      //关闭弹窗
      this.dialogVisible = false;
      this.$nextTick(() => {
        if (this.tabLabel == "控制点") {
          this.$refs.form.resetFields();
        } else if (this.tabLabel == "地质报告") {
          // this.dizhibaogaoForm = this.detailObject;
          this.$refs.dizhibaogaoForm.resetFields();
          this.fileList = [];
        }
      });
    },
    submitAdd() {
      //新增提交
      if (this.title == "新增") {
        if (this.tabLabel == "控制点") {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.form.x = Number(this.form.x);
              this.form.y = Number(this.form.y);
              this.form.z = Number(this.form.z);
              axios.post(this.addUrl, this.form).then((res) => {
                this.$message.success("新增成功");
                this.dialogVisible = false;
                this.getList();
              });
            } else {
              return false;
            }
          });
        } else if (this.tabLabel == "测量文档") {
          this.dizhibaogaoForm.fileType = 2; //0=地质报告,1=水文报告,2=测量文档
          // this.dizhibaogaoForm.fileSuffix='.jpg'
          // this.dizhibaogaoForm.fileUrl='url'
          this.$refs.dizhibaogaoForm.validate((valid) => {
            if (valid) {
              if (this.dizhibaogaoForm?.fileUrl) {
                axios.post(this.addUrl, this.dizhibaogaoForm).then((res) => {
                  this.$message.success("新增成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              } else {
                this.$message.error("请上传文件");
              }
            } else {
              return false;
            }
          });
        }
      } else if (this.title == "编辑") {
        if (this.tabLabel == "控制点") {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.form.x = Number(this.form.x);
              this.form.y = Number(this.form.y);
              this.form.z = Number(this.form.z);
              axios.post(this.editUrl, this.form).then((res) => {
                this.$message.success("编辑成功");
                this.dialogVisible = false;
                this.getList();
              });
            } else {
              return false;
            }
          });
        } else if (this.tabLabel == "测量文档") {
          this.dizhibaogaoForm.fileType = 2; //0=地质报告,1=水文报告,2=测量文档
          this.$refs.dizhibaogaoForm.validate((valid) => {
            if (valid) {
              if (this.dizhibaogaoForm?.fileUrl != "") {
                axios.post(this.editUrl, this.dizhibaogaoForm).then((res) => {
                  this.$message.success("编辑成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              } else {
                this.$message.error("请上传文件");
              }
            } else {
              return false;
            }
          });
        }
      }
    },
    handledownload(row) {
      console.log(row, "row");
      let str =
        (row.fileUrl?.split("/").slice(-1) + "").split("_")[0] + row.fileSuffix; //文件名
      let index = row.fileUrl.indexOf("/profile");
      let url = row.fileUrl.slice(index);
      axios({
        url: `/common/download/resource?resource=${url}`,
        method: "get",
        responseType: "blob",
      }).then((response) => {
        var fileURL = window.URL.createObjectURL(new Blob([response]));
        var fileLink = document.createElement("a");
        fileLink.href = fileURL; //fileLink.setAttribute("download", '模板.xlsx');
        fileLink.setAttribute("download", str);
        document.body.appendChild(fileLink);
        fileLink.click();
      });
      // let str =
      //   (row.fileUrl?.split("/").slice(-1) + "").split("_")[0] + row.fileSuffix; //文件名
      // fetch(row.fileUrl)
      //   .then((res) => res.blob())
      //   .then((blob) => {
      //     // 创建一个临时的URL对象
      //     const url = URL.createObjectURL(blob);
      //     // 创建一个隐藏的<a>标签，并设置其href属性为临时URL
      //     const a = document.createElement("a");
      //     a.href = url;
      //     a.download = str; // 设置下载的文件名
      //     a.style.display = "none";
      //     // 将<a>标签添加到文档中，并模拟点击下载
      //     document.body.appendChild(a);
      //     a.click();
      //     // 下载完成后，移除<a>标签和临时URL对象
      //     document.body.removeChild(a);
      //     URL.revokeObjectURL(url);
      //   });
    },
    handleDetail(row) {
      //查看
      axios.get(this.detailUrl + row.id).then((res) => {
        if (res.data) {
          this.detailObject = res.data;
          this.detaildialogVisible = true;
        }
      });
    },
    //查看
    detailhandleClose() {
      this.detaildialogVisible = false;
      this.detailObject = {};
    },
    handleEdit(row) {
      //编辑
      this.title = "编辑";
      axios.get(this.detailUrl + row.id).then((res) => {
        if (res.data) {
          if (this.tabLabel == "控制点") {
            this.form = res.data;
          } else if (this.tabLabel == "测量文档") {
            axios
              .post("/geology/digital/filetag/listNoPage", {
                fileType: 2, //文件类型,0=地质报告,1=水文报告,2=测量文档
              })
              .then((res) => {
                this.fenleiAllData = res.data;
              });
            this.dizhibaogaoForm = res.data;
            let str =
              (res.data.fileUrl?.split("/").slice(-1) + "").split("_")[0] +
              res.data.fileSuffix;
            this.fileList = [{ name: str, url: res.data.fileUrl }];
          }
        }
        this.dialogVisible = true;
      });
    },
    delAllFn() {
      //批量删除
      if (this.multipleSelection.length > 0) {
        let arr = [];
        this.multipleSelection.forEach((item, index) => {
          arr.push(item.id);
        });
        let str = arr.join(",");
        this.$confirm("确认批量删除数据?", "提示")
          .then(() => {
            axios.delete(this.deleteUrl + arr).then((res) => {
              this.$message.success("删除成功");
              this.getList();
            });
          })
          .catch(() => {});
      } else {
        this.$message.warning("请选择要删除的数据");
      }
    },
    handleDelete(row) {
      //删除
      this.$confirm("确认删除该条数据?", "提示")
        .then(() => {
          axios.delete(this.deleteUrl + row.id).then((res) => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
    onSubmit() {
      //查询
      this.getList();
    },
    onReset() {
      //重置
      this.searchLabel.forEach((item) => {
        item.bindData = "";
      });
    },
    getHeaderList() {
      axios.get("/vxeheaders/getHeaders").then((res) => {
        this.headerData = res.data;
        this.getList();
      });
    },
    getList() {
      let obj = {
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      if (this.tabLabel == "测量文档") {
        obj.fileType = 2; //文件分类,0=测量文档,1=水文报告,2=测量文档
      }
      if (this.searchLabel[0].bindData || this.searchLabel[1]?.bindData) {
        if (this.tabLabel == "测量文档") {
          obj.fileName = this.searchLabel[0].bindData;
          obj.compilationUnit = this.searchLabel[1].bindData;
        } else {
          obj.tunnelName = this.searchLabel[0].bindData;
        }
        // obj.pageNum = this.page.currentPage;
        // obj.pageSize = this.page.pageSize;
      } else {
        obj.pageNum = this.page.currentPage;
        obj.pageSize = this.page.pageSize;
      }
      let arr = [];
      this.headerData.forEach((item) => {
        if (item.name == this.headerZiduan) {
          this.tableData = [];
          this.currentPage = 1;
          this.pageSize = 10;
          // if (item.show != 0) {
          //   arr.push(item);
          // }
          arr.push(item);
        }
      });
      this.headerTitle = arr;
      axios.post(this.listUrl, obj).then((res) => {
        this.page.total = res.data.total;
        this.tableData = res.data.list;
      });
    },
    paginationFn(e) {
      this.page.currentPage = e.page;
      this.page.pageSize = e.limit;
      this.getList();
      setTimeout(() => {
        if (e.limit == 10) {
          this.tableHeight = 550;
        }
        if (this.tableData.length < 10) {
          this.tableHeight = null;
        }
      }, 500);
    },
    paginationFn2(e) {
      this.page2.currentPage = e.page;
      this.page2.pageSize = e.limit;
      this.getFenleiList();
    },
    selectedCellStyle({ column, columnIndex, row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#061F41",
        };
      } else {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#0B2C54",
        };
      }
    },
  },
  created() {
    this.getHeaderList();
  },
  computed: {
    tableHeaderShow() {
      // let arr = [];
      // this.headerTitle.forEach((item) => {
      //   if (item.show == 1) {
      //     arr.push(item);
      //   }
      // });
      // return arr;
      return this.headerTitle.filter((i) => i.show === 1);
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/assets/styles/dateSelect.scss';
::v-deep .el-table {
background-color: #061f41 !important;
}
.tableContainer {
  width: 100%;
  height: 690px;
  overflow: auto;
  .bottom {
    height: 560px;
    overflow-y: auto;
    background-color: #061f41 !important;
  }
}
::v-deep .is-leaf {
  border: none !important;
      .cell{
  color:#fff !important;
}
}
// ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
//   background-color: transparent !important;
//   color: #000 !important;
// }
/*chrome滚动条颜色设置，纵向滚动条*/
*::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
</style>
<style lang="scss">
// .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 3px;
//   background: #1890ff; /* 修改滚动条颜色 */
// }
.el-select-dropdown__list {
  padding: 0 !important;
}
.shadow-dialog{
  box-shadow: 0px 0px 8.45px 4.23px rgba(62, 137, 222, 0.6);
}
</style>